<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="警告设置" prop="productId">
        <el-select v-model="queryParams.productId" placeholder="请选择警告设置" clearable>
          <el-option
            v-for="dict in alarmRecordingList"
            :key="dict.id"
            :label="dict.productName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="deviceTable" v-loading="loading" :data="alarmSettingList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="设备ID" align="center" prop="deviceName"/>
      <el-table-column label="设备名称" align="center" prop="deviceName"/>
      <el-table-column label="告警名称" align="center" prop="deviceName"/>
      <el-table-column label="告警时间" sortable align="center" prop="registryTime"/>
      <el-table-column label="处理状态" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.deviceState === 'notActive'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['iot:protocol:edit']"
          >编辑
          </el-button>
          <el-button
            v-if="scope.row.deviceState === 'notActive'"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['iot:protocol:remove']"
          >删除
          </el-button>
          <el-button
            v-if="scope.row.deviceState === 'notActive'"
            size="mini"
            type="text"
            icon="el-icon-open"
            @click="handleEnableDisableStateChange(scope.row)"
            v-hasPermi="['iot:protocol:remove']"
          >启用
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.deviceState === 'notActive'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['iot:protocol:edit']"
          >编辑
          </el-button>
          <el-button
            v-if="scope.row.deviceState === 'notActive'"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['iot:protocol:remove']"
          >删除
          </el-button>
          <el-button
            v-if="scope.row.deviceState === 'notActive'"
            size="mini"
            type="text"
            icon="el-icon-open"
            @click="handleEnableDisableStateChange(scope.row)"
            v-hasPermi="['iot:protocol:remove']"
          >启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'AlarmSetting',
  components: {
  },
  data() {
    return {
      // 告警记录表格数据
      alarmSettingList: [],
      //告警设置列表
      alarmRecordingList: [],
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productId:null
      }
    }
  },
  computed: {
  },
  methods: {
    resetQuery(){

    },
    handleQuery(){

    },
    handleEnableDisableStateChange(){

    },
    handleDelete(){

    },
    handleUpdate(){

    },
    handleSelectionChange(){

    }
  }
}
</script>

<style scoped>
  .view {
    position: absolute;
    top: 7px;
    left: 200px;
  }
</style>
